<template>
    <div class="ItemMusicTop">
        <img :src="playlist.coverImgUrl" alt="" class="ItemMusic-Bg"/>
        <div class="ItemMusic-left iconfont" @click="$router.go(-1)">&#xe625;</div>
        <div class="ItemMusicContent">
            <span>歌单</span>
        </div>
        <div class="ItemMusic-reright iconfont">&#xe651;</div>
        <div class="ItemMusic-right iconfont">&#xea72;</div>
    </div>
    <div class="ItemMusicMiddle">
        <div class="Middle-left">
            <img :src="playlist.coverImgUrl" alt="" class="Middle-left-img"/>
        </div>
        <div class="Middle-right">
            <div class="Middle-right-top">{{playlist.name}}</div>
            <div class="Middle-name">
                <img :src="playlist.creator.avatarUrl" alt="" class="Middle-name-img"/>
                <div class="Middle-name-right">{{playlist.creator.nickname}} ></div>
            </div>
            <div class="Middle-name-content">{{playlist.description}}</div>
        </div>
    </div>
    <div class="ItemMusicFoot">
        <div class="IconItem">
            <div class="ItemMusic-icon iconfont">&#xe762;</div>
            <div class="ltem-content">{{playlist.commentCount}}</div>
        </div>
        <div class="IconItem">
            <div class="ItemMusic-icon iconfont">&#xe626;</div>
            <div class="ltem-content">{{playlist.shareCount}}</div>
        </div>
        <div class="IconItem">
            <div class="ItemMusic-icon iconfont">&#xe8bc;</div>
            <div class="ltem-content">下载</div>
        </div>
        <div class="IconItem">
            <div class="ItemMusic-icon iconfont">&#xe65f;</div>
            <div class="ltem-content">多选</div>
        </div>
    </div>
</template>

<script>

export default({
    setup(props) {
        // console.log(props);
        //如果数据拿不到，就获取sessionStorage中的数据
        if ((props.playlist.creator = "")) {
            props.playlist.creator = JSON.parse(sessionStorage.getItem().playlist).creator
        }
    },
    props:['playlist']
})
</script>

<style lang="less" scoped>
.ItemMusicTop{
    position: relative;
    width: 100%;
    height: 1.3rem;
    display: flex;
    color: rgba(255,255,255,.8);
    .ItemMusic-Bg{
        position: fixed;
        width: 100%;
        height: 90%;
        z-index: -1;
        // background: linear-gradient(to bottom,opacity(0.4));
        filter: blur(20px);
    }
    .ItemMusic-left{
        margin-left: .2rem;
        margin-top: .2rem;
        font-size: .5rem; 
    }
    .ItemMusicContent{
        width: 50%;
        margin-left: .5rem;
        margin-top: .2rem;
        font-size: .4rem; 
    }
    .ItemMusic-reright{
        margin-left: .4rem;
        margin-top: .2rem;
        font-size: .5rem; 
    }
    .ItemMusic-right{
        margin-left: .9rem;
        margin-top: .2rem;
        font-size: .5rem;  
    }
}
.ItemMusicMiddle{
    display: flex;
    width: 100%;
    height: 3rem;
    .Middle-left{
        position: relative;
        width: 35%;
        height: 2.6rem;
        margin-left: .2rem;
        border-radius: .2rem;
        .Middle-left-img{
        width: 100%;
        height: 2.6rem;
        border-radius: .2rem;
        }
    }
    .Middle-right{
        width: 55%;
        margin-left: .4rem;
        .Middle-right-top{
            color: rgba(255,255,255,.8);
        }
        .Middle-name{
            display: flex;
            width: 100%;
            height: .9rem;
            .Middle-name-img{
                display: inline-block;
                width: .6rem;
                height: .6rem;
                margin: .15rem .15rem;
                border-radius:50%;
            }
            .Middle-name-right{
                padding-top: .2rem;
                margin-left: .1rem;
                color: rgba(134, 134, 134, 0.8);
            } 
        }
        .Middle-name-content{
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;				//溢出内容隐藏
            text-overflow: ellipsis;		//文本溢出部分用省略号表示
            display: -webkit-box;			//特别显示模式
            -webkit-line-clamp: 2;			//行数
            line-clamp: 2;					
            -webkit-box-orient: vertical;	//盒子中内容竖直排列
            color: rgba(255,255,255,.6);
        }
    }
}
.ItemMusicFoot{
    display: flex;
    width: 100%;
    height: 1.2rem;
    justify-content: space-around;
    .IconItem{
        width: 20%;
        height: 100%;
        padding-left: .35rem;
        color: rgba(255,255,255,.7);
        .ltem-content{
            margin-top: .1rem;
            font-size: .3rem;
        }
        .ItemMusic-icon{
            padding-left: .1rem;
            font-size: .5rem;
        }
    }
}
</style>
